<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test for connection of mysql with diffrent language.</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/semantic-ui/2.1.8/semantic.min.css" media="screen" title="no title" charset="utf-8">
  <body>

    <div id="app" class="ui segment center">
      <div class="ui segment">
        <h2>The api is from: [<span class="ui teal">{{from}}</span>]::{{url}}</h2>
      </div>
      <div class="ui segment">
        <div class="ui buttons">
          <button class="ui teal basic button" @click="nodejsData()">Nodejs</button>
          <button class="ui blue basic button" @click="pythonData()">Python</button>
          <button class="ui green basic button" @click="golangData()">Golang</button>
          <button class="ui red basic button" @click="phpData()">PHP</button>
          <button class="ui yellow basic button" @click="rustData()">Rust</button>
        </div>
      </div>
      <div class="ui segment two column grid">
        <div class="row">
          <div class="six wide column">
            <h3>Json Object</h3>
            <pre>{{json}}</pre>
          </div>
          <div class="nine wide right column">
            <h3>DataList</h3>
            <table class="ui celled table">
              <thead>
                <tr>
                  <th>id</th>
                  <th>Username</th>
                  <th>Phone</th>
                  <th>Grade</th>
                  <th>School</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(index, user) in users">
                  <td>
                    {{index + 1}}
                  </td>
                  <td>{{user.username}}</td>
                  <td>{{user.phone}}</td>
                  <td>{{user.grade}}</td>
                  <td>{{user.school}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          </div>
      </div>
    </div>
    <script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
    <script type="text/javascript" src="js/fetch.js"></script>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', app);
      function getService (url) {
        fetch(url)
        .then(function(response) {
          vm.$set('url', response.url);
          return response.json()
        }).then(function(json) {
          vm.$set('source', json);
        }).catch(function(err) {
          alert(err);
        });
      }
      function app () {
        window.vm = new Vue({
          el: '#app',
          data: function() {
            return {
              source: {},
              url: ''
            }
          },
          computed: {
            json: function() {
              return JSON.stringify(this.source, null, 4);
            },
            users: function() {
              return this.source.list || {};
            },
            from: function() {
              return this.source.from || '';
            }
          },
          methods: {
            nodejsData: function() {
              getService('/nodejs/mysql');
            },
            pythonData: function() {
              getService('/python/mysql');
            },
            golangData: function() {
              getService('/golang/mysql');
            },
            phpData: function() {
              getService('/php/index.php');
            },
            rustData: function() {
              getService('/rust/mysql');
            }
          }
        })
      }
    </script>
  </body>
</html>
